<template>
	<div class="movie_list_box clearfix">
		<header>
			<h1>movie科幻小站</h1>
			<h6>电影列表</h6>
		</header>
		<el-row class='text-center'>
			<el-col :span='4' v-for='(item,index) in movice_list' :key='index'>
				<div class="box">
					<div class="movie_img">
						<router-link :to="'/movie_details/'+item._id">
							<img :src="item.poster" />
						</router-link>
					</div>
					<div class="name">{{item.title}}</div>
					<a :href="item.flash" target="_blank">
						<el-button>播放</el-button>
					</a>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	const request = require('@/api/movies.js')
	export default {
		data() {
			return {
				movice_list: [],
			}
		},
		created() {
			this.doRequestgetmovies()
		},
		methods: {
			doRequestgetmovies() {
				const id = this.$route.query.id
				request.getmovies({
					id: id
				}).then(res => {
					console.log(res)
					this.movice_list = res.data
				})

			}
		}
	}
</script>
<style type="text/scss" lang="scss" scoped="scoped">
	.box {
		padding: 10px;
	}
	
	.movie_list_box {
		.movie_img {
			img {
				width: 100%;
				height: 220px;
			}
		}
		.name {
			height: 40px;
			line-height: 40px;
		}
	}
</style>